import React from 'react'
import './index.css'
/**
 * 分页组件
 * 属性：
 * 1. current：初始页码
 * 2. total：总数据量
 * 3. limit：页容量，每页显示的数据量
 * 4. panelNumber：数字页码最多显示多少个
 * 5. onPageChange：当页码改变的事件
 */
export default function Pager({ current, total, limit, panelNumber = 7, onPageChange = (i) => { } }) {

    // 总页数
    const pageNumber = Math.ceil(total / limit)

    // 如果 总页数 = 0
    if (pageNumber === 0) return null

    // 最小页码 最小取1
    let pageMin = current - Math.floor(panelNumber / 2)
    pageMin = pageMin <= 1 ? 1 : pageMin

    // 最大页面 最大取 pageNumber
    let pageMax = pageMin + panelNumber - 1
    pageMax = pageMax >= pageNumber ? pageNumber : pageMax

    // 页码区域
    const pageCode = []
    for (let i = pageMin; i <= pageMax; i++) {
        pageCode.push(<span key={i} onClick={() => toPage(i)} className={current === i ? 'item active' : 'item'}>{i}</span>)
    }

    /**
     * 跳转到某一页
     * @param {number} index 目标页码
     */
    function toPage(index) {
        index = index <= 1 ? 1 : index
        index = index >= pageNumber ? pageNumber : index
        if (index === current) return
        onPageChange(index)
    }

    return (
        <>
            <span onClick={() => toPage(1)} className={current === 1 ? 'item disabled' : 'item'}>首页</span>
            <span onClick={() => toPage(current - 1)} className={current === 1 ? 'item disabled' : 'item'}>上一页</span>

            {pageCode}

            <span onClick={() => toPage(current + 1)} className={current === pageNumber ? 'item disabled' : 'item'}>下一页</span>
            <span onClick={() => toPage(pageNumber)} className={current === pageNumber ? 'item disabled' : 'item'}>尾页</span>
            <span className="current"> {current}/{pageNumber}</span>

        </>
    )
}
